<script>
import {getDetail, updateProjectConfig} from "@/api/aihuman/IntelligentInteraction/IntelligentInteraction";

export default {
  name: "configDialog",
  data() {
    return {
      currentItems: null,
      dialogVisible: false,
      form: {
        "llmToken": "",
        "llmConfig": {
          "LLM_URL": "",
          "MODEL_NAME": "",
          "RAG_URL": "",
          "NSFW_RESPONSE": "",
          "SYSTEM_PROMPT": "",
          "RAG_TEMPLATE": "",
          "PROMPT_TEMPLATE_WITHOUT_SEARCH": ""
        }
      },
      rules: {
        llmToken: [
          { required: true, message: '请输入agent内部接入的大模型的访问token', trigger: 'blur' }
        ],
        'llmConfig.LLM_URL': [
          { required: true, message: '请输入大模型的访问api', trigger: 'blur' }
        ],
        'llmConfig.MODEL_NAME': [
          { required: true, message: '请输入大模型名称', trigger: 'blur' }
        ],
        'llmConfig.RAG_URL': [
          { required: true, message: '请输入大模型RAG搜索增强问答地址', trigger: 'blur' }
        ],
        'llmConfig.NSFW_RESPONSE': [
          { required: true, message: '请输入内容不安全时的回复', trigger: 'blur' }
        ],
        'llmConfig.SYSTEM_PROMPT': [
          { required: true, message: '请输入大模型系统提示语', trigger: 'blur' }
        ],
        'llmConfig.RAG_TEMPLATE': [
          { required: true, message: '请输入大模型RAG搜索增强模板', trigger: 'blur' }
        ],
        'llmConfig.PROMPT_TEMPLATE_WITHOUT_SEARCH': [
          { required: true, message: '请输入搜索不到内容时的提示模板', trigger: 'blur' }
        ]
      },
      loading: false // 添加 loading 属性
    }
  },
  methods: {
    async open(data) {
      this.currentItems = data;
      this.dialogVisible = true;
      try {
        const res = await getDetail({
          id: this.currentItems.id
        });
        if (res.data.data.projectConfig === null) {
          this.form = {
            "llmToken": "",
            "llmConfig": {
              "LLM_URL": "",
              "MODEL_NAME": "",
              "RAG_URL": "",
              "NSFW_RESPONSE": "",
              "SYSTEM_PROMPT": "",
              "RAG_TEMPLATE": "",
              "PROMPT_TEMPLATE_WITHOUT_SEARCH": ""
            }
          };
          this.$nextTick(() => {
            this.$refs['form'].clearValidate();
          });
        } else {
          console.log(res.data.data.projectConfig);
          this.form = {...JSON.parse(res.data.data.projectConfig)};
        }
      } catch (error) {
        console.error('获取项目配置失败:', error);
        this.$message.error('获取项目配置失败，请稍后再试');
      }
    },
    async submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true; // 设置 loading 为 true
          try {
            const {data} = await updateProjectConfig({
              id: this.currentItems.id,
              projectConfig: JSON.stringify(this.form)
            });
            this.$message.success(data.msg);
            this.dialogVisible = false;
          } catch (error) {
            console.error('更新项目配置失败:', error);
            this.$message.error('更新项目配置失败，请稍后再试');
          } finally {
            this.loading = false; // 设置 loading 为 false
          }
        } else {
          console.log('校验失败!');
          return false;
        }
      });
    }
  }
}
</script>

<template>
  <huilan-dialog
    title="发布与使用"
    :visible.sync="dialogVisible"
    append-to-body
    top="3vh"
    width="1000px">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
      <div class="block-title">
        大模型配置
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="agent内部接入的大模型的访问token" prop="llmToken">
            <el-input v-model="form.llmToken"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大模型的访问api" prop="llmConfig.LLM_URL">
            <el-input v-model="form.llmConfig.LLM_URL"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="大模型名称" prop="llmConfig.MODEL_NAME">
            <el-input v-model="form.llmConfig.MODEL_NAME"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大模型RAG搜索增强问答地址" prop="llmConfig.RAG_URL">
            <el-input v-model="form.llmConfig.RAG_URL"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="内容不安全时的回复" prop="llmConfig.NSFW_RESPONSE">
            <el-input v-model="form.llmConfig.NSFW_RESPONSE"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大模型系统提示语" prop="llmConfig.SYSTEM_PROMPT">
            <el-input v-model="form.llmConfig.SYSTEM_PROMPT"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="大模型RAG搜索增强模板" prop="llmConfig.RAG_TEMPLATE">
            <el-input v-model="form.llmConfig.RAG_TEMPLATE"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="搜索不到内容时的提示模板" prop="llmConfig.PROMPT_TEMPLATE_WITHOUT_SEARCH">
            <el-input v-model="form.llmConfig.PROMPT_TEMPLATE_WITHOUT_SEARCH"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="loading" @click="dialogVisible = false">取 消</el-button> <!-- 绑定 loading 属性 -->
      <el-button type="primary" :loading="loading" @click="submitForm('form')">确 定</el-button> <!-- 绑定 loading 属性 -->
    </span>
  </huilan-dialog>
</template>

<style scoped lang="scss">
.block-title {
  font-weight: bold;
  border-bottom: 1px solid #e4e3e3;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 16px;
}
</style>
